var viewId 
viewId = Number(location.search.substr(1))

// 获取数据
function getCourseInfo() {
    console.log(viewId,'hhh')
    $.ajax({
        url:'/courses/view',
        method:'GET',
        data:{
            viewId
        }
    })
     .done(function(res) {
         console.log(res.msg,res)
         var courseInfo = res.data
         renderDetails(courseInfo)
     })
     .fail(function(err) {
         console.log(err.msg)
     })
}

getCourseInfo()
function renderDetails(editCourseNew) {
    $('.xl-course-details').text('')
    var div = 
    `        
    <div class="xl-details-left-wrap">
    <div class="xl-details-left-top">
        <div class="xl-details-img-wrap">
            <img src="../../images/lxm_images/ca120.png" alt="">
        </div>
        <div class="xl-details-name-wrap clear">
            <p class="xl-course-name">${editCourseNew[0].courseName}</p>
            <p class="xl-course-time">${editCourseNew[0].courseCreateTime}</p>
        </div>
    </div>

    <div class="xl-details-left-bottom">
        <div class="xl-details-content-wrap">
            <h4>关于课程</h4>
            <p>${editCourseNew[0].courseIntroduction}</p>
        </div>
        <div class="xl-details-text-wrap clear">
            <p class="xl-text-title">开课课程</p>
            <p class="xl-text-content">${editCourseNew[0].courseStartTime}</p>
        </div>
        <div class="xl-details-text-wrap clear">
            <p class="xl-text-title">课程时长</p>
            <p class="xl-text-content">${editCourseNew[0].courseDuration}</p>
        </div>
        <div class="xl-details-text-wrap clear">
            <p class="xl-text-title">课程老师</p>
            <p class="xl-text-content">${editCourseNew[0].courseProfessor}</p>
        </div>
        <div class="xl-details-text-wrap clear">
            <p class="xl-text-title">已读数量</p>
            <p class="xl-text-content">1000</p>
        </div>
        <div class="xl-details-text-wrap clear">
            <p class="xl-text-title">上课地址</p>
            <p class="xl-text-content">${editCourseNew[0].courseAddress}</p>
        </div>
        <div class="xl-student-study-wrap clear">
            <div class="xl-study-details">
                <span class="xl-hours">7000</span>
                <span>小时</span>
                <p class="xl-hours-text">累积上课时长</p>
            </div>
            <div class="xl-study-details">
                <span class="xl-hours">120</span>
                <span>人</span>
                <p class="xl-hours-text">累积参与人数</p>
            </div>
            <div class="xl-study-details last">
                <span class="xl-hours">85</span>
                <span>分</span>
                <p class="xl-hours-text">综合平均课时</p>
            </div>
        </div>

    </div>
</div>

<div class="xl-details-right-wrap">
    <div class="xl-introduction-wrap">
        <span class="xl-introduction">课程介绍</span>
        <span class="xl-check-in">签到记录</span>
    </div>
    <div class="xl-introduction-details-wrap">
        <div class="xl-details-wrap">
            <p>
            ${editCourseNew[0].courseContent}
            </p>
            <img src="../../images/lxm_images/u1868.png" alt="">
        </div>
        <div class="xl-check-in-wrap">
            <table class="table">
                <thead>
                    <tr>
                        <th>名字</th>
                        <th>班级</th>
                        <th>性别</th>
                        <th>学号</th>
                        <th>签到状态</th>
                    </tr>
                </thead>
                <tbody class="xl-course-tbody">
                    <tr>
                        <td>温森特</td>
                        <td>高二（2）班</td>
                        <td>男</td>
                        <td>123456789</td>
                        <td>已签到</td>
                    </tr>
                    <tr>
                        <td>温森特</td>
                        <td>高二（2）班</td>
                        <td>男</td>
                        <td>123456789</td>
                        <td>已签到</td>
                    </tr>
                    <tr>
                        <td>温森特</td>
                        <td>高二（2）班</td>
                        <td>男</td>
                        <td>123456789</td>
                        <td>已签到</td>
                    </tr>
                    <tr>
                        <td>温森特</td>
                        <td>高二（2）班</td>
                        <td>男</td>
                        <td>123456789</td>
                        <td>已签到</td>
                    </tr>
                </tbody>
        </div>
    </div>
</div>
    `
    $('.xl-course-details').append($(div))
}

// 课程介绍被点击
$('.xl-course-details').on('click','.xl-introduction',function() {
    $(this).css({
        fontWeight:'700',
        borderBottom:'1px solid #00bfff'
    })
    $('.xl-details-wrap').css('display','block')
    $('.xl-check-in-wrap').css({
        display:'none'
    })
    $('.xl-check-in').css({
        fontWeight:'500',
        borderBottom:'none',
    })
})
// 签到记录被点击
$('.xl-course-details').on('click','.xl-check-in',function() {
    $(this).css({
        fontWeight:'700',
        borderBottom:'1px solid #00bfff'
    })

    $('.xl-details-wrap').css('display','none')
    $('.xl-check-in-wrap').css('display','block')
    $('.xl-introduction').css({
        fontWeight:'500',
        borderBottom:'none',
    })
})
// 点击返回
$('.xl-return').on('click',function() {
    parent.$('.myiframe').prop('src','lxm_pages/all_course.html')
})